<script setup lang="ts">
import { Edit, Refresh, Plus } from "@element-plus/icons-vue"
import Table from "@/components/Table/index.vue"
import { propsList } from "./config"
import Modal from "@/components/modal/index.vue"
import { ref, Ref, reactive, onMounted, watch } from "vue"
import { type FormInstance, FormRules, ElMessage } from "element-plus"
import { checkSpaceAndSpecialCharacters, handleCheckPath, isValidIPv4 } from "@/utils/index"
import {
  getUnitInfoApi,
  getAreaListApi,
  delPartitionApi,
  addPartitionApi,
  editPartitionApi,
  editUnitInfoApi,
  editReceiverApi,
  getReceiverListApi
} from "@/api/architecture/index"
import { type IPartitionListData, IUnitInfo, IReceiverData, IEditReceiverParams } from "@/api/architecture/types/index"
import { useFileChunk } from "@/hooks/useFileChunk/index"
import { useUpload } from "@/hooks/useUpload"
import { useServer } from "@/hooks/useServer"
import { FileChunk } from "@/hooks/useFileChunk/type"
import { debounce } from "lodash-es"
import { getSystemVersionApi } from "@/api/login/index"
import { useMqttStore } from "@/store/modules/mqtt"
import { storeToRefs } from "pinia"

enum STATUS {
  CONNECTING = "连接中",
  ERROR = "连接失败",
  SUCCESS = "连接成功"
}

interface IUnitData {
  company_name: string
  company_logo: string
}

interface IPartitionData {
  area_id: number
  area_name: string
  area_code: string
  page_turning: number
}

interface IManageData {
  /** 1号接收器IP  */
  No1IP: string
  /** 1号接收器连接状态  */
  No1Status?: string
  /** 2号接收器IP  */
  No2IP?: string
  /** 2号接收器连接状态  */
  No2Status?: string
  /** 3号接收器IP  */
  No3IP?: string
  /** 3号接收器连接状态  */
  No3Status?: string
  /** 4号接收器IP  */
  No4IP?: string
  /** 4号接收器连接状态  */
  No4Status?: string
  /** 5号接收器IP  */
  No5IP?: string
  /** 5号接收器连接状态  */
  No5Status?: string
}

const MANAGEKEY = {
  1: { No1IP: "", No1Status: "" },
  2: { No2IP: "", No2Status: "" },
  3: { No3IP: "", No3Status: "" },
  4: { No4IP: "", No4Status: "" },
  5: { No5IP: "", No5Status: "" }
}

const tableData = ref<IPartitionListData[]>([])
const version = ref<string>("")
const server = useServer()
const percentage = ref(0)
const unitInfo = reactive<Partial<IUnitInfo>>({})
const unitFormRef = ref<FormInstance>()
const partitionmRef = ref<FormInstance>()
const mqttStore = useMqttStore()
const { offDevicesCounts } = storeToRefs(mqttStore)

const unitModalRef: Ref<typeof Modal | null> = ref(null)
const partitionModalRef: Ref<typeof Modal | null> = ref(null)
const delModalRef: Ref<typeof Modal | null> = ref(null)
const manageModalRef: Ref<typeof Modal | null> = ref(null)

const partitionRule = ref<FormRules<IPartitionData>>({
  area_name: [{ required: true, validator: checkSpaceAndSpecialCharacters }],
  area_code: [{ required: true, validator: checkSpaceAndSpecialCharacters }],
  page_turning: [{ required: true }]
})

const partitionTitle = ref("添加分区")
const editPartition = ref<boolean>(false)
const delPartitionInfo = reactive<Partial<IPartitionListData>>({})

const unitForm = reactive<IUnitData>({
  company_name: "",
  company_logo: ""
})

const partitionForm = reactive<IPartitionData>({
  area_id: -1,
  area_name: "",
  area_code: "",
  page_turning: 5
})

const manageForm = reactive<IManageData>({
  No1IP: "",
  No1Status: ""
})

// 翻页options
const speedOptions = ref([
  {
    label: "5s",
    value: 5
  },
  {
    label: "8s",
    value: 8
  },
  {
    label: "10s",
    value: 10
  },
  {
    label: "12s",
    value: 12
  },
  {
    label: "15s",
    value: 15
  },
  {
    label: "20s",
    value: 20
  },
  {
    label: "30s",
    value: 30
  },
  {
    label: "45s",
    value: 45
  },
  {
    label: "50s",
    value: 50
  },
  {
    label: "1min",
    value: 60
  }
])

// 根据状态变化刷新列表
watch(
  () => {
    offDevicesCounts.value
  },
  () => {
    updateList()
  }
)

// 展示单位信息弹窗
const handleEdit = () => {
  unitForm.company_name = unitInfo.company_name as string
  unitForm.company_logo = unitInfo.company_logo as string
  ;(unitModalRef as Ref<typeof Modal>).value.showModal()
}

// 重置数据
const resetData = () => {
  partitionForm.area_id = -1
  partitionForm.area_code = ""
  partitionForm.area_name = ""
  partitionForm.page_turning = 5
  editPartition.value = false
  partitionTitle.value = "添加分区"
}

const searchParams = reactive({
  page_index: 1,
  page_size: 10,
  data_sum: 0
})

// 展示添加分区
const handleAdd = () => {
  resetData()
  ;(partitionModalRef as Ref<typeof Modal>).value.showModal()
}

// 展示编辑分区
const handleEditPartition = (row: IPartitionListData) => {
  partitionTitle.value = "编辑分区"
  editPartition.value = true

  partitionForm.area_id = row.id
  partitionForm.area_name = row.area_name
  partitionForm.area_code = row.area_code
  partitionForm.page_turning = row.page_turning
  ;(partitionModalRef as Ref<typeof Modal>).value.showModal()
}

// 展示删除分区
const handleDelPartition = (row: IPartitionListData) => {
  Object.assign(delPartitionInfo, row)
  ;(delModalRef as Ref<typeof Modal>).value.showModal()
}

// 展示管理分区
const handleManageArea = (row: IPartitionListData) => {
  partitionForm.area_name = row.area_name
  partitionForm.area_id = row.id
  ;(manageModalRef as Ref<typeof Modal>).value.showModal()
  getReceiverList()
}

// 关闭单位信息
const handleCloseUnit = () => {
  unitFormRef.value?.resetFields()
  ;(unitModalRef as Ref<typeof Modal>).value.closeModal()
}

// 关闭分区
const handleClosePartition = () => {
  partitionmRef.value?.resetFields()
  ;(partitionModalRef as Ref<typeof Modal>).value.closeModal()
}

// 关闭删除弹窗
const handleCloseDel = () => {
  ;(delModalRef as Ref<typeof Modal>).value.closeModal()
}

// 关闭管理弹窗
const handleCloseManage = () => {
  ;(manageModalRef as Ref<typeof Modal>).value.closeModal()
}

// 删除分区确认
const handleConfirmDel = async () => {
  try {
    const params = {
      area_id: delPartitionInfo.id as number
    }

    const res = await delPartitionApi(params)

    const { result, return_message } = res
    if (result === 200) {
      handleCloseDel()
      ElMessage.success("删除成功")
      getAreaList()
    } else {
      ElMessage.error(return_message)
    }
  } catch (error) {
    console.info(error)
  }
}

// 管理分区确认
const handleConfirmManage = () => {
  editReceiver()
}

// 单位信息确认
const handleUnitConfirm = async () => {
  const { company_name, company_logo } = unitForm
  const params = {
    company_name,
    company_logo
  }
  const res = await editUnitInfoApi(params)
  const { result, return_message } = res

  if (result === 200) {
    ElMessage.success("修改成功")
    getUnitInfo()
    handleCloseUnit()
  } else {
    ElMessage.error(return_message)
  }
}

interface IEditParams {
  area_name: string
  page_turning: number
  device_type_id: number
  area_code?: string
  area_id?: number
}

// 添加/编辑分区
const handlePartitionConfirm = debounce(async () => {
  try {
    const { area_code, area_name, page_turning, area_id } = partitionForm
    const params: IEditParams = {
      area_name,
      page_turning,
      device_type_id: 1 // 1智能输液 2无线报警
    }

    if (editPartition.value) {
      params.area_id = area_id
    } else {
      params.area_code = area_code
    }

    const res = editPartition.value ? await editPartitionApi(params) : await addPartitionApi(params)
    const { return_message, result } = res

    if (result === 200) {
      ElMessage.success(editPartition.value ? "修改成功" : "新增成功")
      getAreaList()
      handleClosePartition()
    } else {
      ElMessage.error(return_message)
    }
  } catch (error) {
    console.info(error)
  }
}, 500)

// 随机生成码
const handleRandom = () => {
  const randomString = Math.random().toString(36).substring(2, 10)
  const timeStamp = new Date().getTime()
  return randomString + timeStamp
}

// 处理分片参数
const handleTranData = (chunks: FileChunk[]) => {
  const itemHash = handleRandom()
  return chunks.map((item, index: number) => {
    const params = {
      totalChunks: chunks.length,
      file: item.chunk,
      filename: item.filename,
      relativePath: item.filename,
      identifier: itemHash,
      totalSize: item.totalSize,
      chunkNumber: index + 1,
      currentChunkSize: 1024 * 1024 * 2,
      chunkSize: 1024 * 1024 * 2
    }
    return params
  })
}

// 图片上传
const handleChangeFile = async (event: Event) => {
  const target = event.target as HTMLInputElement
  const file = (target.files as FileList)[0]
  if (!["image/png", "image/jpeg"].includes(file.type)) {
    target.value = ""
    return ElMessage.error("封面图片只能上传jpg、jpeg或png格式的图片")
  }

  try {
    const { sliceFile } = useFileChunk(file)
    // 分片
    const chunks = await sliceFile()
    const transChunks = handleTranData(chunks)

    const { uploadFile } = useUpload({ uploadAPI: `${server}/api/v2/resource/res_upload` }, transChunks)
    const result = await uploadFile()

    // 获取最后一个请求
    const lastRes = result.pop()
    const { result: lastResult, data, return_message } = lastRes
    if (lastResult === 200) {
      unitForm.company_logo = data.file_path
    } else {
      ElMessage.error(return_message)
    }
  } catch (error) {
    target.value = ""
    console.info(error)
  }
  target.value = ""
}

// 获取单位信息
const getUnitInfo = async () => {
  try {
    const res = await getUnitInfoApi()

    const { result, data, return_message } = res
    if (result === 200) {
      const used = Number(data.disk_used.replace(/\s*MB/g, ""))
      const total = Number(data.disk_total.replace(/\s*MB/g, ""))

      percentage.value = (used / total) * 100
      Object.assign(unitInfo, data)
    } else {
      ElMessage.error(return_message)
    }
  } catch (error) {
    console.info(error)
  }
}

// 获取分区列表
const getAreaList = async () => {
  const params = {
    device_type_id: 1
  }
  const res = await getAreaListApi(params)
  const { result, data, return_message } = res
  if (result === 200) {
    const { page_index, page_size, data_sum, data: areaData } = data
    tableData.value = areaData
    searchParams.data_sum = data_sum
    searchParams.page_index = page_index
    searchParams.page_size = page_size
  } else {
    ElMessage.error(return_message)
  }
}

const getReceiverItem = (sort: number) => {
  return MANAGEKEY[sort as keyof typeof MANAGEKEY]
}

const getKey = (objectData: any, keyName: string) => {
  let editKey = ""
  for (const key in objectData) {
    if (key.endsWith(keyName)) {
      editKey = key
    }
  }

  return editKey
}

// 获取接收器列表
const getReceiverList = async () => {
  const params = {
    area_id: partitionForm.area_id
  }
  const res = await getReceiverListApi(params)
  const { data, result, return_message } = res
  if (result === 200) {
    const { data: receiverData } = data

    receiverData.forEach((item) => {
      const receiverItem = getReceiverItem(item.sort)
      const ipKey = getKey(receiverItem, "IP")
      const statusKey = getKey(receiverItem, "Status")

      receiverItem[ipKey as keyof typeof receiverItem] = item.ip
      receiverItem[statusKey as keyof typeof receiverItem] = item.is_connect

      Object.assign(manageForm, receiverItem)
    })
    console.info(manageForm)
  } else {
    ElMessage.error(return_message)
  }
}

//  按照显示顺序需要固定发送数据的位置
const getSort = (key: string) => {
  const regex = /\d/ // 匹配数字的正则表达式
  const match = key.match(regex)

  if (match) {
    return match[0]
  }
}

// 处理编辑参数
const formatEditParams = () => {
  const params: IReceiverData[] = []
  for (const key in manageForm) {
    const sort = getSort(key) as string
    const is_exist = params.find((item) => item.sort === sort)
    const is_ip = key.endsWith("IP")

    if (is_exist) {
      if (is_ip) {
        is_exist.ip = manageForm[key as keyof typeof manageForm] as string
      }
    } else {
      const paramsItem = {
        sort,
        ip: ""
      }
      if (is_ip) {
        paramsItem.ip = manageForm[key as keyof typeof manageForm] as string
      }

      params.push(paramsItem)
    }
  }

  return params
}

// 检查ip
const checkIp = (ipData: IReceiverData[]) => {
  return ipData.every((item) => isValidIPv4(item.ip))
}

// 编辑接收器
const editReceiver = debounce(async () => {
  const transParams = formatEditParams()
  const ip = checkIp(transParams)
  if (!ip) return ElMessage.error("ip格式不正确")
  const params: IEditReceiverParams = {
    area_id: partitionForm.area_id,
    device_type_id: 1,
    device_receivers: transParams
  }

  const res = await editReceiverApi(params)
  const { return_message, result } = res
  if (result === 200) {
    ElMessage.success("操作成功")
    handleCloseManage()
    getAreaList()
  } else {
    ElMessage.error(return_message)
  }
}, 500)

const handleChangePage = (page: number) => {
  searchParams.page_index = page
  getAreaList()
}

const handleChangeSize = (size: number) => {
  searchParams.page_size = size
  getAreaList()
}

// 获取版本号
const getVersion = async () => {
  const res = await getSystemVersionApi()
  const { result, return_message, data } = res
  if (result === 200) {
    version.value = data.version
  } else {
    ElMessage.error(return_message)
  }
}

// 根据设备是否离线去更新列表
const updateList = () => {
  getAreaList()
}

onMounted(() => {
  getUnitInfo()
  getAreaList()
  getVersion()
})
</script>
<template>
  <div>
    <header flex justify-between mb-20px>
      <span>单位信息</span>
      <div>
        <el-button type="primary" class="bg-#387af6!" :icon="Refresh" @click="() => getUnitInfo()">刷新</el-button>
        <el-button type="primary" :icon="Edit" class="bg-#387af6!" @click="handleEdit">信息编辑</el-button>
      </div>
    </header>

    <!-- 卡片信息 -->
    <div bg-white rounded-8px px-15px py-15px text-14px>
      <header flex border-b-1px border-b-solid class="border-b-#e9e9e9 text-#8c8c8c" py-15px>
        <div flex flex-col flex-1 w-64>
          <span
            >单位名称: <span ml-10px>{{ unitInfo.company_name }}</span></span
          >
          <span mt-20px flex items-center
            >单位logo:
            <img
              v-if="unitInfo.company_logo"
              ml-10px
              h-50px
              w-50px
              :src="`${server}/${unitInfo.company_logo}`"
              alt=""
            />
            <span ml-10px v-else>--</span>
          </span>
        </div>
        <div flex-1 w-64>
          <el-tooltip effect="dark" content="设备数量:接收器数量+输液报警器数量的总和" placement="top">
            <span class="w-25%">设备数量: {{ unitInfo.device_count }}</span>
          </el-tooltip>
        </div>
      </header>

      <div flex flex-col pt-15px class="text-#8c8c8c">
        <span text-black mb-20px>服务器信息</span>

        <div mb-25px flex>
          <span>储存空间：</span>

          <div flex-1 flex>
            <el-progress
              class="w-40%"
              :format="() => `${100 - Number(percentage.toFixed(2))}%可用`"
              :percentage="percentage"
              :stroke-width="15"
            />

            <span w-170px ml-25px>总空间：{{ unitInfo.disk_total }}</span>

            <span w-170px ml-25px>已用空间：{{ unitInfo.disk_used }}</span>

            <span w-170px ml-25px>剩余空间：{{ unitInfo.disk_free }}</span>
          </div>
        </div>

        <span mb-20px>主机型号: {{ unitInfo.hostname }}</span>

        <span mb-20px>设备地址:{{ server.replace(/^https?:\/\//, "") }}</span>

        <span mb-20px>版本号: {{ version }}</span>

        <span>设备序列号: {{ unitInfo.serial_number }}</span>
      </div>
    </div>

    <!-- 列表信息 -->
    <div flex flex-col>
      <header mt-20px mb-15px flex justify-between items-center>
        <span>智能输液报警器分区列表</span>

        <div>
          <el-button type="primary" class="bg-#387af6!" :icon="Refresh" @click="() => getAreaList()">刷新</el-button>
          <el-button type="primary" :icon="Plus" class="bg-#387af6!" @click="handleAdd">添加分区</el-button>
        </div>
      </header>

      <Table
        :index="true"
        index-name="分区编号"
        :index-width="140"
        :total="searchParams.data_sum"
        :show-check-box="false"
        :data="tableData"
        :props-list="propsList"
        max-height="300px"
        @change-page="handleChangePage"
        @change-size="handleChangeSize"
      >
        <template #detail="{ row }">
          <div v-if="row.offline_devices.length">
            <span class="text-#FF4D4F">[设备连接失败]</span
            ><span v-for="(item, index) in row.offline_devices" :key="item" class="text-#FF4D4F"
              >{{ `${index + 1}.IP:${item}` }}&nbsp;&nbsp;</span
            >
          </div>
          <span v-else>--</span>
        </template>
        <template #handler="{ row }">
          <div flex>
            <span cursor-pointer @click="handleManageArea(row)" class="text-#1890FF">管理</span>
            <span cursor-pointer @click="handleEditPartition(row)" mx-20px class="text-#1890FF">编辑</span>
            <span cursor-pointer @click="handleDelPartition(row)" class="text-#FF4C4C">删除</span>
          </div>
        </template>
      </Table>
    </div>

    <!-- 编辑单位信息 -->
    <Modal ref="unitModalRef" title="编辑单位信息" width="520" @close="handleCloseUnit">
      <template #content>
        <div>
          <el-form ref="unitFormRef" :model="unitForm" label-width="auto" style="max-width: 600px">
            <el-form-item class="mb-24px!" label="单位名称：" prop="company_name">
              <el-input maxlength="20" class="w-330px!" v-model="unitForm.company_name" />
            </el-form-item>

            <el-form-item label="单位logo：" prop="company_logo">
              <label
                for="logo"
                cursor-pointer
                class="bg-#D1DEFF text-#4879FB boder-bg-#4879FB"
                border-1px
                border-solid
                rounded-3px
                px-3px
                text-14px
                h-30px
                leading-30px
                >点击上传logo</label
              >

              <input
                @change="handleChangeFile"
                accept="image/jpeg,image/png"
                style="display: none"
                type="file"
                id="logo"
              />
            </el-form-item>
          </el-form>

          <div v-if="unitForm.company_logo" flex flex-col ml-82px mt-10px>
            <el-image
              style="width: 100px; height: 100px"
              :src="handleCheckPath(unitForm.company_logo)"
              :zoom-rate="1.2"
              :preview-src-list="[handleCheckPath(unitForm.company_logo)]"
              :initial-index="4"
              fit="cover"
            />
            <span mt-10px class="text-#999999" text-12px>(可点击放大查看)</span>
          </div>
        </div>
      </template>

      <template #footer>
        <div pr-20px>
          <el-button class="w-105px!" @click="handleCloseUnit">取消</el-button>
          <el-button class="w-105px! bg-#387af6!" type="primary" @click="handleUnitConfirm"> 确定 </el-button>
        </div>
      </template>
    </Modal>

    <!-- 添加/编辑分区 -->
    <Modal ref="partitionModalRef" :title="partitionTitle" width="520" @close="handleClosePartition">
      <template #content>
        <div>
          <el-form
            ref="partitionmRef"
            :rules="partitionRule"
            :model="partitionForm"
            label-width="auto"
            style="max-width: 600px"
          >
            <el-form-item class="mb-24px!" label="分区名称：" prop="area_name">
              <el-input maxlength="10" class="w-330px!" v-model="partitionForm.area_name" />
            </el-form-item>

            <el-form-item class="mb-24px!" label="分区编码：" prop="area_code">
              <el-input :disabled="editPartition" maxlength="20" class="w-330px!" v-model="partitionForm.area_code" />
            </el-form-item>

            <el-form-item class="mb-24px!" label="切页速度：" prop="page_turning">
              <el-select v-model="partitionForm.page_turning" style="width: 150px">
                <el-option v-for="item in speedOptions" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
              <span ml-5px class="text-#A7A7A8">状态展示页面切页速度</span>
            </el-form-item>
          </el-form>
        </div>
      </template>

      <template #footer>
        <div pr-20px>
          <el-button class="w-105px!" @click="handleClosePartition">取消</el-button>
          <el-button class="w-105px! bg-#387af6!" type="primary" @click="handlePartitionConfirm"> 确定 </el-button>
        </div>
      </template>
    </Modal>

    <!-- 删除分区 -->
    <Modal ref="delModalRef" title="删除分区确认弹窗" width="520" @close="handleCloseDel">
      <template #content>
        <div flex flex-col>
          <div flex items-center mb-10px>
            <SvgIcon name="warning" class="w-20px! h-20px!" />
            <span ml-5px pl-5px class="bg-#FFFBE6" h-35px leading-40px text-black text-18px>
              确认删除{{ delPartitionInfo.area_name }}分区吗？
            </span>
          </div>

          <span ml-25px class="text-#A7A7A8">删除后，该分区所有设备信息将会丢失</span>
        </div>
      </template>

      <template #footer>
        <div pr-20px>
          <el-button class="w-105px!" @click="handleCloseDel">取消</el-button>
          <el-button class="w-105px! bg-#387af6!" type="primary" @click="handleConfirmDel"> 确定 </el-button>
        </div>
      </template>
    </Modal>

    <!-- 管理分区 -->
    <Modal ref="manageModalRef" title="管理分区" width="660" @close="handleCloseManage">
      <template #content>
        <div class="bg-#F7F9FB">
          <el-row mb-20px>
            <el-col :span="24">
              <div flex items-center>
                <span w-93px text-end>分区名称：</span>
                <span ml-10px pl-10px rounded-3px h-30px leading-30px bg-white w-250px>{{
                  partitionForm.area_name
                }}</span>
              </div>
            </el-col>
          </el-row>

          <el-form :model="manageForm" style="max-width: 600px">
            <el-row items-center mb-20px>
              <el-col :span="20">
                <el-form-item label="1号接收器IP：" label-width="105px" prop="No1IP">
                  <el-input maxlength="15" placeholder="请输入接收器ip" v-model="manageForm.No1IP" />
                </el-form-item>
              </el-col>

              <el-col :span="4" pl-20px>
                <span
                  :class="[
                    STATUS.CONNECTING === manageForm.No1Status
                      ? 'text-#F59F13'
                      : STATUS.ERROR === manageForm.No1Status
                        ? 'text-#FF4C4C'
                        : 'text-#52C41A'
                  ]"
                  >{{ manageForm.No1Status }}</span
                >
              </el-col>
            </el-row>

            <el-row items-center mb-20px>
              <el-col :span="20">
                <el-form-item label="2号接收器IP：" label-width="105px" prop="No2IP">
                  <el-input maxlength="15" placeholder="请输入接收器ip" v-model="manageForm.No2IP" />
                </el-form-item>
              </el-col>

              <el-col :span="4" pl-20px>
                <span
                  :class="[
                    STATUS.CONNECTING === manageForm.No2Status
                      ? 'text-#F59F13'
                      : STATUS.ERROR === manageForm.No2Status
                        ? 'text-#FF4C4C'
                        : 'text-#52C41A'
                  ]"
                  >{{ manageForm.No2Status }}</span
                >
              </el-col>
            </el-row>

            <el-row items-center mb-20px>
              <el-col :span="20">
                <el-form-item label="3号接收器IP：" label-width="105px" prop="No3IP">
                  <el-input maxlength="15" placeholder="请输入接收器ip" v-model="manageForm.No3IP" />
                </el-form-item>
              </el-col>

              <el-col :span="4" pl-20px>
                <span
                  :class="[
                    STATUS.CONNECTING === manageForm.No3Status
                      ? 'text-#F59F13'
                      : STATUS.ERROR === manageForm.No3Status
                        ? 'text-#FF4C4C'
                        : 'text-#52C41A'
                  ]"
                  >{{ manageForm.No3Status }}</span
                >
              </el-col>
            </el-row>

            <el-row items-center mb-20px>
              <el-col :span="20">
                <el-form-item label="4号接收器IP：" label-width="105px" prop="No4IP">
                  <el-input maxlength="15" placeholder="请输入接收器ip" v-model="manageForm.No4IP" />
                </el-form-item>
              </el-col>

              <el-col :span="4" pl-20px>
                <span
                  :class="[
                    STATUS.CONNECTING === manageForm.No4Status
                      ? 'text-#F59F13'
                      : STATUS.ERROR === manageForm.No4Status
                        ? 'text-#FF4C4C'
                        : 'text-#52C41A'
                  ]"
                  >{{ manageForm.No4Status }}</span
                >
              </el-col>
            </el-row>

            <el-row items-center>
              <el-col :span="20">
                <el-form-item label="5号接收器IP：" label-width="105px" prop="No5IP">
                  <el-input maxlength="15" placeholder="请输入接收器ip" v-model="manageForm.No5IP" />
                </el-form-item>
              </el-col>

              <el-col :span="4" pl-20px>
                <span
                  :class="[
                    STATUS.CONNECTING === manageForm.No5Status
                      ? 'text-#F59F13'
                      : STATUS.ERROR === manageForm.No5Status
                        ? 'text-#FF4C4C'
                        : 'text-#52C41A'
                  ]"
                  >{{ manageForm.No5Status }}</span
                >
              </el-col>
            </el-row>
          </el-form>
        </div>
      </template>

      <template #footer>
        <div pr-20px mt-30px>
          <el-button class="w-105px!" @click="handleCloseManage">取消</el-button>
          <el-button class="w-105px! bg-#387af6!" type="primary" @click="handleConfirmManage"> 确定 </el-button>
        </div>
      </template>
    </Modal>
  </div>
</template>
<style lang="scss" scoped>
:deep(.el-dialog) {
  background: #f7f9fb;
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
  border-radius: 5px;

  .el-dialog__body {
    padding: 20px;
  }
}

.el-progress {
  :deep(.el-progress__text) {
    color: #60adfb;
    font-size: 14px !important;
    margin-left: 20px;
  }

  :deep(.el-progress-bar__outer) {
    .el-progress-bar__inner {
      border-radius: 0px;
    }
    border-radius: 0px;
  }
}

:deep(.el-form-item) {
  margin-bottom: 0px;
}
</style>
